<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>学生管理</title>
<link rel="stylesheet" type="text/css"
	th:href="@{/static/css/normalize.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/static/css/demo.css}" />
<link rel="stylesheet" type="text/css"
	th:href="@{/static/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css"
	th:href="@{/static/css/stuManger.css}" />
<script th:inline="javascript">
			/*<![CDATA[*/
				var me = [[${searchMeg}]];
						 if(me != '' && me != null){
						 	alert(me);
						 } 
			/*]]>*/
			</script>

<style>
.container-width {
	max-width: 400px;
}

.form-group {
	margin: 10px auto;
}

.form {
	margin-top: 40px;
}

.label {
	color: #777;
	font-size: 12px;
}
</style>
</head>
<body>
	<div class="r-top">
		<div class="titile">
			<div class="img">
				<i class="glyphicon glyphicon-education"></i>
			</div>
			<div class="detail-info">
				<span class="p1">学生管理</span><br /> <span class="p2"><i
					class="glyphicon glyphicon-grain"></i>&nbsp;进行学生的添加或者修改</span>
			</div>
		</div>
		<form th:action="@{/student/studentList.do}" th:method="post">
			<div class="myinput">
				<div class="e-input">
					<input type="text" placeholder="输入学号、班级、姓名查询" name="replace"
						th:value="${replace }" />
				</div>
				<div class="search">
					<button type="submit">
						<i class="glyphicon glyphicon-search"></i>
					</button>
				</div>
			</div>
		</form>
	</div>
	<div class="r-main">

		<div class="table-responsive">
			<table class="table table-striped table-hover">
				<thead>
					<tr>
						<th><input type="checkbox" id="all" /></th>
						<td>ID</td>
						<td>学号</td>
						<td>姓名</td>
						<td>班级</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr th:each="prod : ${pageInfo.list}">
						<td class="first"><input type="checkbox" /></td>
						<td th:text="${prod.id}"></td>
						<td th:text="${prod.studentId}"></td>
						<td th:text="${prod.name}"></td>
						<td th:text="${prod.grades}"></td>
						<td><a href="javascript:void(0)" class="edit"
							data-toggle="modal" data-target="#myModal"><img
								th:src="@{/static/img/edit.png}" alt="编辑" width="20px"
								height="20px" /></a> <span class="mid">|</span> <a
							href="javascript:void(0)" class="delete"><img
								th:src="@{/static/img/delete.png}" width="20px" height="20px" /></a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<!-- 显示分页信息 -->
		<div class="recode">
			<!-- 分页文字信息  -->
			<p>
				当前 <span th:text="${pageInfo.pageNum}"></span>页,总<span
					th:text="${pageInfo.pages }"></span> 页,总 <span
					th:text="${pageInfo.total}"></span>条记录
			</p>
		</div>

		<!-- 分页条信息 -->
		<div class="page">
			<ul class="allpage">
				<li><a
					th:href="@{/student/studentList.do?(pn=1,replace=${replace})}">首页</a></li>

				<li th:if="${pageInfo.hasPreviousPage}"><a
					th:href="@{/student/studentList.do?(pn=${pageInfo.pageNum-1},replace=${replace})}">&laquo;</a>
				</li>

				<span th:each="page_Num : ${pageInfo.navigatepageNums}">

					<li th:if="${page_Num == pageInfo.pageNum}" class="active"><a
						href="#"><c th:text="${page_Num}"></c></a></li>

					<li th:if="${page_Num != pageInfo.pageNum }"><a
						th:href="@{/student/studentList.do?(pn=${page_Num },replace=${replace})}">
							<c th:text="${page_Num}"></c>
					</a></li>

				</span>

				<li th:if="${pageInfo.hasNextPage }"><a
					th:href="@{/student/studentList.do?(pn=${pageInfo.pageNum+1},replace=${replace})}">
						<c aria-hidden="true">&raquo;</c></a></li>

				<li><a th:href="@{/student/studentList.do?(pn=${pageInfo.pages},replace=${replace})}">末页</a></li>
			</ul>
		</div>	
		
		
		<div class="mybtn">
			<a th:href="@{/student/addStu.do}"><input type="button" value="添加学生" class="btn btn-default" /></a> <span></span> 
			<input type="button" name="cancel" id="cancel" value="删除学生"
			class="btn btn-default" />
		</div>
	</div>

	

	<!-- 修改模态框 -->
	<div class="modal fade in" id="myModal" tabindex="-1">
		<!--淡入淡出在最外层添加-->
		<!--窗口声明-->
		<div class="modal-dialog modal-md">
			<!--小窗口在窗口声明处添加-->
			<!-- modal-content 内容声明 -->
			<div class="modal-content">
				<!--头部-->
				<div class="modal-header">
					<button class="close" data-dismiss="modal">
						<span>&times;</span>
					</button>
					<h4 class="modal-title">学生信息修改</h4>
				</div>
				<!--主体-->
				<div class="modal-body">
					<div class="container container-width">
						<div class="title">
							<h2>
								<small>按照提示输入信息</small>
							</h2>
						</div>
						<form class="form-horizontal" role="form" id="form-horizontal">
							<div class="form-group">
								<label for="firstname" class="col-sm-3 control-label">学号</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="studentId" value=""
										name="studentId" placeholder="请输入学号" required><input
										type="hidden" class="form-control" id="id" value=""
										placeholder="请输入ID" name="id">
								</div>
							</div>
							<div class="form-group">
								<label for="firstname" class="col-sm-3 control-label">姓名</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="studentName"
										value="" name="name" placeholder="请输入姓名" required>
								</div>
							</div>
							<div class="form-group">
								<label for="firstname" class="col-sm-3 control-label">班级</label>
								<div class="col-sm-9">
									<select name="grades">
										<option id="studentGrades"></option>
										<option th:each="class:${allClass}"
											th:text="${class.className}"></option>
									</select>
								</div>
							</div>
						</form>
					</div>
				</div>
				<!--注脚-->
				<div class="modal-footer">
					<button id="updateStudent" type="submit"
						class="btn btn-default btn-primary">确认</button>
				</div>
			</div>
		</div>
	</div>
	<script th:src="@{/static/js/jquery.min.js}" type="text/javascript"
		charset="utf-8"></script>
	<script th:src="@{/static/js/bootstrap.min.js}" type="text/javascript"
		charset="utf-8"></script>
	<script th:inline="javascript">
				$(function(){
					$('#all').click(function(){
						if(this.checked){
							$('.first :checkbox').prop("checked",true)
						}else{
							$('.first :checkbox').prop("checked",false)
						}
					});
				})
				
				$('#myModal').modal({
				        backdrop: 'static',
				        show:false
				   		 });
				    var bg = document.getElementsByClassName("bg")[0];
				    $("button").click(function () {
				        bg.style.display ="block";
				    });
				    $(".close").click(function () {
				        bg.style.display = "none";
				    })
		
				//点击修改，填充信息
				$('.edit').click(function() {
					var id = $(this).parent().parent().find("td").eq(1).text();
					var studentId = $(this).parent().parent().find("td").eq(2).text();
					var name = $(this).parent().parent().find("td").eq(3).text();
					var grades = $(this).parent().parent().find("td").eq(4).text();
					var t = grades.trim();
					$("#id").val(id);
					$("#studentId").val(studentId);
					$("#studentName").val(name);
					$("#studentGrades").text(t);
					$("#studentGrades").val(t);
				})
			
				 //点击更新，提交信息
				$(document).on("click", "#updateStudent", function() {
					//发送ajax请求保存更新的数据
					$.ajax({
						url : "updateStudent.do",
						type : "PUT",
						data : $("#form-horizontal").serialize(),
						success : function(meg) {
							if (meg == "ok") {
								alert("修改成功");
								window.location.reload();
							} else {
								alert("学号重复，修改失败");
							}
			
						}
					});
				}); 
				
				
				//单个删除
				$(document).on("click",".delete",function(){
				//1、弹出是否确认删除对话框
				 var Name = $(this).parents("tr").find("td:eq(3)").text();
				 var Id = $(this).parents("tr").find("td:eq(1)").text();
				 if(confirm("确认删除【"+Name+"】吗？")){
					$.ajax({
						url:"deleteStudent.do",
 						type:'post',
 						data:{ids:Id},
						contentType:'application/x-www-form-urlencoded', //contentType很重要
						success:function(){
							alert("删除成功");
							window.location.reload();
						}
					});
			
				}  
			});
			
			//点击全部删除，就批量删除
		$(document).on("click","#cancel",function(){
			var Names = "";
			var del_idstr = "";
			$.each($(".first :checked"),function(){
				//this
				Names += $(this).parents("tr").find("td:eq(3)").text()+",";
				//组装id字符串
				del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
			});
			//去除empNames多余的,
			Names = Names.substring(0, Names.length-1);
			//去除删除的id多余的-
			del_idstr = del_idstr.substring(0, del_idstr.length-1);
			if(confirm("确认删除【"+Names+"】吗？")){
				//发送ajax请求删除
				$.ajax({
					url:'deleteStudent.do',
					type:"post",
					data:{ids:del_idstr},
					success:function(){
						alert("成功！！！");
						window.location.reload();
					}
				});
			}
		});
			</script>
</body>
</html>